<template>
    <div class="toast">
      <i :class="getClass"></i>
      <span>{{ toastMsg }}</span>
    </div>
  </template>
  
  <script>
  import { mapState } from "vuex";
  export default {
    computed: {
      ...mapState({
        toastMsg: (state) => state.showToast.toastMsg,
        toastType: (state) => state.showToast.toastType,
      }),
      getClass() {
        if (this.toastType == "success") {
          return "iconfont icon-toast_chenggong";
        } else if (this.toastType == "error") {
          return "iconfont icon-toast-shibai_huaban";
        } else if (this.toastType == "warning") {
          return "iconfont icon-toast-jinggao";
        }
      },
    },
  };
  </script> 
  
  <style lang = "less" scoped>
  .toast {
    position: fixed;
    padding: 20px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    border-radius: 10px;
  
    .iconfont {
      margin-right: 10px;
    }
  
    .icon-toast-shibai_huaban {
      color: red;
    }
  
    .icon-toast_chenggong {
      color: green;
    }
  
    .icon-toast-jinggao {
      color: orange;
    }
  }
  </style>